<template>
	<view>
	<uni-section title="报名信息填写" type="line"></uni-section>
	<view class="adBaseView">
		<view class="adRowView">
			<view class="headView"><view class="mustView" >*</view>项目名称</view>
			<view style="width: 70%;"><input  class="input" v-model="instance.instanceName" placeholder="请输入项目名称" /></view>
		</view>
		<view class="bottomLine"/>
	</view>
	
	<view class="adBaseView">
		<view class="adRowView">
			<view class="headView"><view class="mustView" >*</view>报名说明</view>
			<view style="width: 70%;"><input  class="input" v-model="instance.instanceDes" placeholder="请输入报名说明" /></view>
		</view>
		<view class="bottomLine"/>
	</view>
	
	<view class="adBaseView">
		<view class="adRowView">
			<view class="headView"><view class="mustView" >*</view>年份</view>
			<view style="width: 70%;"><input  class="input" v-model="instance.year" placeholder="例:2020" /></view>
		</view>
		<view class="bottomLine"/>
	</view>
	
	
	<view class="adBaseView">
		<view class="adRowView">
			<view class="headView"><view class="mustView" >*</view>是否可见</view>
			<view style="width: 70%;"><input  class="input" v-model="instance.isVisible" placeholder="请输入0或1" /></view>
		</view>
		<view class="bottomLine"/>
	</view>
	
	
	<view class="adBaseView">
		<view class="adRowView">
			<view class="headView">人员限制类型</view>
			<view style="width: 70%;"><picker class="input" @change="bindchange" :value="index" :range="limitTypeList" :range-key="'label'">
							<view class="uni-input">{{limitTypeList[index].label}}</view>
						</picker></view>
		</view>
		<view class="bottomLine"/>
	</view>	
	
	
	
	<view class="adBaseView">
		<view class="adRowView">
			<view class="headView">报名开始日期</view>
			<view >
				<picker mode="date" :value="instance.enrollStartDate" :start="startDate" :end="endDate" @change="bindDateChange">
				                        <view>{{instance.enrollStartDate}}</view>
				                    </picker>
			</view>
		</view>
		<view class="bottomLine"/>
	</view>
	
	
	<view class="adBaseView">
		<view class="adRowView">
			<view class="headView">报名开始时间</view>
			<view >
				<picker mode="time" :value="instance.enrollStartTime" start="00:00" end="24:00" @change="bindTimeChange">
				                        <view>{{instance.enrollStartTime}}</view>
				                    </picker>
			</view>
		</view>
		<view class="bottomLine"/>
	</view>
	
	
	<view class="adBaseView">
		<view class="adRowView">
			<view class="headView">报名结束日期</view>
			<view >
				<picker mode="date" :value="instance.enrollEndDate" :start="startDate" :end="endDate" @change="bindDateChangeenrollEndDate">
				                        <view>{{instance.enrollEndDate}}</view>
				                    </picker>
			</view>
		</view>
		<view class="bottomLine"/>
	</view>
	
	
	<view class="adBaseView">
		<view class="adRowView">
			<view class="headView">报名结束时间</view>
			<view >
				<picker mode="time" :value="instance.enrollEndTime" start="00:00" end="24:00" @change="bindTimeChangeenrollEndTime">
				                        <view>{{instance.enrollEndTime}}</view>
				                    </picker>
			</view>
		</view>
		<view class="bottomLine"/>
	</view>
	
	<view class="adBaseView">
		<view class="adRowView">
			<view class="headView">结果发布开始日期</view>
			<view >
				<picker mode="date" :value="instance.viewStartDate" :start="startDate" :end="endDate" @change="bindDateChangeviewStartDate">
				                        <view>{{instance.viewStartDate}}</view>
				                    </picker>
			</view>
		</view>
		<view class="bottomLine"/>
	</view>
	
	
	<view class="adBaseView">
		<view class="adRowView">
			<view class="headView">结果发布开始时间</view>
			<view >
				<picker mode="time" :value="instance.viewStartTime" start="00:00" end="24:00" @change="bindTimeChangeviewStartTime">
				                        <view>{{instance.viewStartTime}}</view>
				                    </picker>
			</view>
		</view>
		<view class="bottomLine"/>
	</view>
	
	<view class="adBaseView">
		<view class="adRowView">
			<view class="headView">结果发布结束日期</view>
			<view >
				<picker mode="date" :value="instance.viewEndDate" :start="startDate" :end="endDate" @change="bindDateChangeviewEndDate">
				                        <view>{{instance.viewEndDate}}</view>
				                    </picker>
			</view>
		</view>
		<view class="bottomLine"/>
	</view>
	
	<view class="adBaseView">
		<view class="adRowView">
			<view class="headView">结果发布结束时间</view>
			<view >
				<picker mode="time" :value="instance.viewEndTime" start="00:00" end="24:00" @change="bindTimeChangeviewEndTime">
				                        <view>{{instance.viewEndTime}}</view>
				                    </picker>
			</view>
		</view>
		<view class="bottomLine"/>
	</view>
	
	
	<uni-section title="填写具体项" type="line"></uni-section>
	<view class="adBaseView">
		<view class="adRowView">
			<view class="headView"><view class="mustView" >*</view>名称</view>
			<view style="width: 70%;"><input  class="input" v-model="item.itemName" placeholder="请输入名称" /></view>
		</view>
		<view class="bottomLine"/>
	</view>
	
	<view class="adBaseView">
		<view class="adRowView">
			<view class="headView"><view class="mustView" >*</view>需要人数</view>
			<view style="width: 70%;"><input  class="input" v-model="item.needCount" placeholder="请输入需要人数" /></view>
		</view>
		<view class="bottomLine"/>
	</view>
	
	<view class="adBaseView">
		<view class="adRowView">
			<view class="headView"><view class="mustView" >*</view>属性1</view>
			<view style="width: 70%;"><input  class="input" v-model="item.attribute1" placeholder="请输入属性1" /></view>
		</view>
		<view class="bottomLine"/>
	</view>
	
	
	<button class="button-cell" @click="submit">保存并提交</button>
	</view>
</template>


<script>
	import uniSection from '@/components/uni-section/uni-section.vue'
	
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	import  { getEnrollProjectInstanceDetail } from '@/api/project.js'
	import  { saveOrUpdateEnrollProjectInstance } from '@/api/project.js'
	export default {
		 components: {
		 uniSection,
		 uniList,
		 uniListItem},
		    data() {
			    const currentDate = this.getDate({
			            format: true
			        })
			return {
				instance:{
					enrollEndDate:'',
					enrollEndTime:'',
					enrollStartDate: '',
					enrollStartTime: '',
					instanceDes:'',
					instanceId:'',
					instanceName:'',
					instanceNum: '',
					isVisible: '',
					limitType: '',
					viewEndDate: '',
					viewEndTime: '',
					viewStartDate: '',
					viewStartTime: ''
				},
				date: currentDate,
				showyemian: false,
				showdetail: false,
				index: 0,
				projectId: '',
				limitTypeList: [],
				instanceId: '',
				instanceName: '',
				retType: '',
				item: {
					itemId: '',
					itemName: '',
					needCount: '',
					attribute1: ''
					}
			}
		},
		onLoad(options) {
			this.projectId = options.projectId
			this.instanceId = options.instanceId
			getEnrollProjectInstanceDetail({instanceId: this.instanceId}).then(res => {
							this.instance = res.data.instance
							this.item = res.data.item
							this.index = res.data.instance.limitTypeIndex
							this.limitTypeList = res.data.instance.limitTypeList
							
						}).catch(err => {
							
						})
		},
		 computed: {
		        startDate() {
		            return this.getDate('start');
		        },
		        endDate() {
		            return this.getDate('end');
		        }
		    },
		methods:{
			bindchange(e){
				this.index = e.target.value
				 
				this.instance.limitType = this.limitTypeList[this.index].value
				 console.log(this.instance.limitType )
			},
			
		            bindDateChange: function(e) {
		            
					this.instance.enrollStartDate =  e.target.value
		          },
				   bindTimeChange: function(e) {
				            this.instance.enrollStartTime = e.target.value
				   },
				   bindDateChangeenrollEndDate(e){
					   this.instance.enrollEndDate = e.target.value
				   },
				   bindTimeChangeenrollEndTime(e){
					   this.instance.enrollEndTime = e.target.value
				   },
				   bindDateChangeviewStartDate(e){
					   this.instance.viewStartDate = e.target.value
				   },
				   bindTimeChangeviewStartTime(e){
					   this.instance.viewStartTime = e.target.value
				   },
				   bindDateChangeviewEndDate(e){
					   this.instance.viewEndDate = e.target.value
				   },
				   bindTimeChangeviewEndTime(e){
					    this.instance.viewEndTime = e.target.value
				   },
				   
				   
				   
				   
				   
			submit(){
				saveOrUpdateEnrollProjectInstance({instance: this.instance,projectId: this.projectId,item:this.item}).then(res => {
								uni.switchTab({
									url:'../fist/fist'
								})
								
							}).catch(err => {
								
							})
			},
			getDate(type) {
			            const date = new Date();
			            let year = date.getFullYear();
			            let month = date.getMonth() + 1;
			            let day = date.getDate();
			
			            if (type === 'start') {
			                year = year - 60;
			            } else if (type === 'end') {
			                year = year + 2;
			            }
			            month = month > 9 ? month : '0' + month;;
			            day = day > 9 ? day : '0' + day;
			            return `${year}-${month}-${day}`;
			        }
		}
	}
</script>

<style>
</style>
